/**
 * Created by Freeman on 2016/8/12.
 */
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {Field, reduxForm} from 'redux-form'
import classnames from 'classnames'
import * as Actions from '../../actions'

const validate = values => {
    const errors = {}
    if (!values.nickname) {
        errors.nickname = 'Required'
    } else if (values.nickname.length <= 2 || values.nickname.length > 15) {
        errors.nickname = '请输入2-15字符,中英文,数字和下划线'
    } else if (!/^[(\u4e00-\u9fa5)0-9a-zA-Z\\_\s@]+$/.test(values.nickname)) {
        errors.nickname = '呢称不合法'
    }
    return errors
};
const renderField = ({input, type, label, meta: {touched, error}}) => (
    <div className={classnames({'form-group': true, 'has-error': touched && error})}>
        <label className="control-label">{label}</label>
        <input className="form-control" {...input} type={type}/>
        {touched && error && <span className="help-block">{error}</span>}
    </div>
);

class Register extends Component {
    constructor(props) {
        super(props);
        this.submitForm = this.submitForm.bind(this);
    }

    submitForm(values){
        const {registerUser} = this.props.actions;
        registerUser(values)
    }



    render() {

        const {handleSubmit,invalid , submitting} = this.props;
        return (
            <div className="signin-box">
                <div className="signin-container">
                    <h4 className="title">注 册</h4>
                    <div id="signupForm">
                        <form className="signin-form form-horizontal" onSubmit={handleSubmit(this.submitForm)}>
                            <div className="form-group">
                                <Field name="nickname" component={renderField} label="昵称" type="text"
                                       placeholder="2-15字符，中英文、数字和下划线"/>
                            </div>
                            <div className="form-group">
                                <Field name="email" component={renderField} label="邮箱" type="email"
                                       placeholder="邮箱"/>
                            </div>
                            <div className="form-group">
                                <Field name="password" component={renderField} label="密码" type="password"
                                       placeholder="密码"/>
                            </div>
                            <div className="form-group">
                                <button type="submit" className="btn btn-block btn-lg btn-primary"
                                        disabled={submitting || invalid}>注 册
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

Register.propTypes = {
    actions:PropTypes.object.isRequired,
    handleSubmit: PropTypes.func,
};
const mapStateToProps = state =>{
    return {

    }
}

const mapDispatchToProps = dispatch => {
    return {
        actions: bindActionCreators(Actions, dispatch)
    }
};


Register = reduxForm({
    form: 'register',
    validate
})(Register);

Register = connect(
    mapStateToProps,
    mapDispatchToProps
)(Register);

export default Register